<template>
  <div class="app-container">
    <div class="voteInfoCard">
      <div class="context-title">
        {{ voteInfo.title }}
      </div>
      <div class="subtitle">
        <span class="subtitle-item">发布者：{{ voteInfo.creater }}</span>
        <span class="subtitle-item">发布时间：{{ voteInfo.syncTime }}</span>
        <span class="subtitle-item">阅读量：{{ voteInfo.viewNumber }}</span>
      </div>
      <pre>{{ voteInfo.content }}</pre>
      <p>待投票问题：<strong>{{ voteInfo.question }}</strong></p>
      <p>投票选项：
        <el-tag v-for="tag in options" style="margin-right: 10px">{{ tag }}</el-tag>
      </p>
      <p>截止时间：{{ voteInfo.endTime }}</p>
      <p>请谨慎考虑后投出您宝贵的一票,感谢您的参与!</p>
    </div>

    <el-divider content-position="left"><strong>投票统计</strong></el-divider>
    <div style="width: 100%; overflow-y: visible">
      <div style="width: 60%; display: inline-block; vertical-align: top">
        <div style="padding: 10px 20px">
          <span>总人数：{{ totalNum }}人</span>
          <span style="margin-left: 20px">已投票：{{ finishedNum }}人</span>
          <span style="margin-left: 20px">占比：{{ Math.floor(finishedNum/totalNum*100) }}%</span>
        </div>
        <el-collapse accordion style="width: 100%; margin-top: 20px">
          <!--          <el-collapse-item v-for="item in chartData" :disabled="item.name==='未投票'">-->
          <el-collapse-item v-for="item in chartData" disabled>
            <template slot="title">
              <span style="width: 80px; overflow-x: visible; margin-left: 30px; margin-right: 20px">
                <el-tag>{{ item.name }}</el-tag>
              </span>
              <span style="width: 50px; margin-right: 20px">{{ item.value }}人</span>
              <el-progress :text-inside="true" :stroke-width="20" :percentage="Math.floor(item.value/totalNum*100)" style="width: 300px" />
            </template>
            <div style="margin-left: 30px; margin-right: 30px">
              <el-table
                v-loading="loading"
                :data="voteInfoList"
                max-height="200"
                :row-style="{height: '0'}"
                :cell-style="{padding: '0'}"
              >
                <el-table-column label="业委会投票ID" align="center" prop="voteId" />
                <el-table-column label="用户ID" align="center" prop="userId" />
                <el-table-column label="选项" align="center" prop="option" />
                <el-table-column label="投票时间" align="center" prop="syncTime" width="180">
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.syncTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div style="width: 40%; display: inline-block; vertical-align: top">
        <div
          id="voteStatsChart"
          style="width: 350px; height: 350px"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { listVoteInfo, getVoteInfo, getVoteStats, delVoteInfo, addVoteInfo, updateVoteInfo, exportVoteInfo } from '@/api/owner/voteInfo'
import { getVote } from '@/api/owner/vote'
import * as echarts from 'echarts'

export default {
  name: 'VoteInfo',
  components: {
  },
  data() {
    return {
      // 总条数
      total: 0,
      loading: false,
      // 投票详情表格数据
      voteInfoList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        voteId: null,
        option: null
      },
      // 表单参数
      form: {},

      // 投票编号
      voteId: null,
      // 投票基本信息
      voteInfo: {},
      // 选项
      options: [],
      // 投票各选项统计信息
      stats: [],
      totalNum: null,
      finishedNum: null,
      // 饼状图数据
      chartData: [],
    }
  },
  created() {
    this.voteId = this.$route.params.id
    this.getVoteInfo()
    this.queryParams.voteId = this.voteId
    this.getList()
  },
  mounted() {
    this.drawPieChart()
  },
  methods: {

    /** 查询投票详情列表 */
    getList() {
      this.loading = true
      listVoteInfo(this.queryParams).then(response => {
        this.voteInfoList = response.rows
        this.total = response.total
        this.loading = false
      })
    },

    getVoteInfo() {
      getVote(this.voteId).then(response => {
        this.voteInfo = response.data
        this.options = this.voteInfo.options.split(',')
      })
    },

    // getStats() {
    //   getVoteStats(this.voteId).then(response => {
    //     this.stats = response.optionStats.split(',');
    //     this.totalNum = response.totalNum;
    //     this.finishedNum = response.finishedNum;
    //     // console.log(this.stats, this.stats[0], this.totalNum, this.finishedNum);
    //   })
    // },
    //
    // preparePieChartData() {
    //   this.getStats();
    //   let chartData = [
    //     {value: this.totalNum-this.finishedNum, name: '未投票'}
    //   ];
    //   let options = this.options;
    //   let optionStats = this.stats;
    //   for(let i=0; i<options.length; i++){
    //     chartData.push({value: parseInt(optionStats[i]), name: options[i]});
    //   }
    //   this.chartData = chartData;
    //   // console.log('准备数据', this.chartOption)
    // },

    drawPieChart() {
      getVoteStats(this.voteId).then(response => {
        this.stats = response.optionStats.split(',')
        this.totalNum = response.totalNum
        this.finishedNum = response.finishedNum
        // console.log(this.stats, this.stats[0], this.totalNum, this.finishedNum);

        const chartData = [
          { value: this.totalNum - this.finishedNum, name: '未投票' }
        ]
        const options = this.options
        const optionStats = this.stats
        for (let i = 0; i < options.length; i++) {
          chartData.push({ value: parseInt(optionStats[i]), name: options[i] })
        }
        this.chartData = chartData

        const myChart = echarts.init(document.getElementById('voteStatsChart'))
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '投票统计',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.chartData
            }
          ]
        }
        myChart.setOption(option)

        // myChart.on('click', function (param) {
        //   console.log(param.data.name, '被点击了！')
        // });
      })
    },

  }
}
</script>

<style>
.voteInfoCard {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 80%;
  margin: 10px auto;
  padding: 20px 40px;
}
.context-title {
  font-size: 24px;
  color: #444444;
  text-align: center;
  font-weight: bold;
  line-height: 38px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}
.subtitle {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}
.subtitle-item {
  display: inline-block;
  color: #999;
  font-size: 14px;
  line-height: 30px;
  height: 30px;
  padding-left: 5px;
  padding-right: 5px;
}
pre {
  white-space: pre-wrap;       /* css-3 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  word-break: break-all;
  overflow: hidden;
  color: #444444;
  font-size: 16px;
  line-height: 32px;
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
  margin: 0 auto;
}
.optionLine {

}
.optionTag {
  display: inline-block;
  margin: 5px;
}
.optionProgress {
  display: inline-block;
  min-width: 400px;
  margin: 5px;
}
.detailButton {
  display: inline-block;
  margin: 5px;
}
</style>
